import React, {PureComponent} from 'react';
import {connect} from 'react-redux';
import {NUMBER_TYPE} from "../constants/Constants";

class ReactReduxDemo extends PureComponent {

    changeNum = (item) => {
        this.props.changeNum(item + this.props.myNumber)
    }

    render() {
        const { myNumber } = this.props;
        return (
            <div>react-redux组件：
                <button onClick={() => this.changeNum(-1)}>-</button>
                <span style={{color: 'blue', padding: '0px 5px'}}>{myNumber}</span>
                <button onClick={() => this.changeNum(+1)}>+</button>
            </div>
        );
    }
}

ReactReduxDemo.propTypes = {};

const mapStateToProps = (state) => ({
    myNumber: state[NUMBER_TYPE]
})

function mapDispatchToProps(dispatch) {
    return {
        changeNum(v) {
            dispatch({type: NUMBER_TYPE, value: v});
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ReactReduxDemo);